<template>
	<div class="total-footer-box">
		<div class="flex-start-center">
			<div style="text-align: right;">
				<el-popover trigger="hover" content="小计 = 一体丝金额 + 氨纶金额 + 粗纱金额 + 附加费用">
					<span slot="reference" class="el-icon-info"></span>
				</el-popover>
				<span>小计</span>
			</div>
			<span class="total-footer-val">：{{ formData.subTotal || 0 }}</span>
		</div>
		<div class="flex-start-center">
			<div style="text-align: right;">利润</div>
			<span class="total-footer-val">：{{ formData.profit || 0 }}</span>
		</div>
		<div class="flex-start-center" style="font-size: 18px;">
			<div style="text-align: right;">
				<el-popover trigger="hover" content="合计 = 小计 + 利润">
					<span slot="reference" class="el-icon-info" style="font-size: 13px;"></span>
				</el-popover>
				<span>合计</span>
			</div>
			<span class="total-footer-val">：{{ formData.offerPrice || 0 }}</span>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .total-footer-box {
        width: 100%;
        border-top: solid 1px #dcdee2;
        flex-direction: column;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        padding: 10px 0;
        font-size: 14px;
        position: sticky;
        bottom: 0;
        left: 0;
        background: #2d8cf0;
        color: #fff;
        box-sizing: border-box;
        z-index: 100;
        .total-footer-val {
            width: 120px;
        }
    }
</style>
